<script setup lang="ts">
import { ref } from "vue-demi";
import { Discussion, RequestDiscussion } from "../../index";
import { addDiscussionAPI, getAllDiscussionAPI } from "../../api/discussion.ts";
import DiscussionItem from "./DiscussionItem.vue";
import LatestReplyList from "./LatestReplyList.vue";
import useUserStore from "../../store/userStore.ts";

const discussions = ref<Discussion[]>();
const isLoading = ref(true);
const dialogIsShow = ref(false);
const userStore = useUserStore();

const getData = () => {
  getAllDiscussionAPI()
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      discussions.value = result.data;
      isLoading.value = false;
    })
    .catch(() => {
      isLoading.value = false;
    });
};
getData();

const formData = ref<{
  title: string;
  content: string;
}>({
  title: "",
  content: "",
});
const publishDiscussion = () => {
  const data: RequestDiscussion = {
    title: formData.value.title,
    content: formData.value.content,
    publishUserID: 5,
    publishUserName: userStore.userName,
  };
  addDiscussionAPI(data)
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      const data = result.data;
      if (data !== null) {
        getData();
        dialogIsShow.value = false;
      }
    });
};
</script>

<template>
  <!--  <h1>讨论页</h1>-->
  <div>
    <el-row>
      <div
        class="mx-3 fixed overflow-auto rounded shadow-lg overflow-hidden max-width-side"
      >
        <div
          class="text-center text-2xl bg-gray-200 p-3"
          style="background-color: #84638e; color: white"
        >
          最新回复
        </div>
        <LatestReplyList />
      </div>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="18" class="mx-auto mb-2">
        <div class="card mb-5 bg-primary" v-if="userStore.isAdmin">
          <el-button type="primary" @click="() => (dialogIsShow = true)"
            >发表讨论
          </el-button>
        </div>
        <div class="bg-white rounded-2xl shadow-lg" v-loading="isLoading">
          <div
            class="text-center text-2xl p-3"
            style="background-color: #84638e; color: white"
          >
            全部主题
          </div>
          <DiscussionItem
            v-for="discussion in discussions"
            class="p-2"
            :key="discussion.id"
            :discussion="discussion"
          />
        </div>
      </el-col>
    </el-row>
  </div>

  <el-dialog v-model="dialogIsShow">
    <template #header> 发表新的讨论</template>
    <el-form :label-position="'top'" :label-width="200">
      <el-form-item label="讨论标题:">
        <el-input type="text" v-model="formData.title" />
      </el-form-item>
      <el-form-item label="讨论内容:">
        <el-input type="text" v-model="formData.content" />
      </el-form-item>
      <el-button type="primary" @click="publishDiscussion">发表</el-button>
      <el-button type="danger" @click="() => (dialogIsShow = false)"
        >取消
      </el-button>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>
